<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
			#app{
				width: 200px;
				height: 200px;
				background: #09f;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script type="text/javascript">
			let app = document.getElementById("app")
			
			let startX,startY,endX=null,endY=null;
			
			app.addEventListener("touchstart",function(event){
				let {clientX,clientY} = event.touches[0]
				startX = clientX
				startY = clientY
				
			});
			
			app.addEventListener("touchmove",function(event){
				let {clientX:x,clientY:y} = event.touches[0]
				let moveX = x-startX
				let moveY = y-startY
				
				if(endX != null){
					moveX += endX
					moveY += endY
				}
				
				this.style.transform = `translate(${moveX}px,${moveY}px)`
			});
			
			app.addEventListener("touchend",function(event){
				let style = this.style.transform
				
				style = style.replace("translate(","")
				style = style.replace(/px/g,"")
				style = style.replace(")","")
				style = style.split(",")
				console.log(style)
				endX = style[0]*1
				endY = style[1]*1
			});
			
			app.addEventListener("touchcancel",function(){
				
			})
		</script>
	</body>
</html>
